<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
    <h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>

<f:view>
    <h:form>
        <h:panelGrid columns="2">
            <h:outputLabel value="First Name:"/>
            <h:inputText id="name" value="#{userBean.name}"
                         valueChangeListener="#{userBean.nameChanged}">
                <f:ajax event="change" execute="@this" render="proposed-login"/>
            </h:inputText>
            <h:outputLabel id="lastname-label" value="Last Name:"/>
            <h:inputText id="lastname" value="#{userBean.lastName}"
                         valueChangeListener="#{userBean.lastNameChanged}">
                <f:ajax event="change" execute="@this" render="proposed-login"/>
            </h:inputText>
            <h:outputLabel id="login-label" value="Proposed Login:"/>
            <h:inputText id="proposed-login" disabled="true" value="#{userBean.proposedLogin}"/>
            <h:commandButton value="Submit" action="#{userControllerBean.register}"/>
        </h:panelGrid>
    </h:form>
</f:view>
</html>
